<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id='app'>
        <el-upload action="https://sm.ms/api/upload" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :before-upload='beforeUpload' limit="10" :on-exceed="handleExceed" :file-list="fileList" name='smfile' :http-request='req' list-type='picture-card'>
            <i class="el-icon-plus"></i>
        </el-upload>
        <img :src="item.response.data.url" v-for='item in fileList'>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                inputVisible: false,
                fileList: []
            }
        },
        mounted: function() {},
        methods: {
            req(file) {
                let formData = new FormData();
                formData.append('smfile', file.file);
                axios({
                        method: 'post',
                        url: 'https://sm.ms/api/upload',
                        data: formData,
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    })
                    .then(function(res) {
                        file.onSuccess(res.data, file.file)
                        return
                    })
            },
            beforeUpload(file) {
                console.log('beforeUpload')

                // return false
            },
            handleSuccess(response, file, fileList) {
                console.log('handleSuccess')
                // console.log(response)
                // console.log(file)
                // console.log(fileList)
                this.fileList = fileList
            },
            handlePreview() {
                console.log('handlePreview')
            },
            handleRemove() {
                console.log('handleRemove')
            },
            beforeRemove() {
                console.log('beforeRemove')
            },
            handleExceed() {
                console.log('handleExceed')
            },
            handleClose(tag, item) {
                item.selections.splice(item.selections.indexOf(tag), 1);
            },
            upload() {
                let formData = new FormData();
                formData.append('name', this.name);
                formData.append('age', this.age);
                formData.append('file', this.file);

                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }


            },
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    console.log('${items!}')
    // vue.tableData = ${items!};
    </script>
</body>

</html>